<template>
  <div class="test-index">
    <div class="test-container">
      <el-card class="test-card">
        <template #header>
          <div class="card-header">
            <span>HousingHub 测试中心</span>
            <el-tag type="info">开发测试环境</el-tag>
          </div>
        </template>

        <div class="test-content">
          <div class="welcome-section">
            <h2>欢迎使用 HousingHub 测试中心</h2>
            <p>这里提供了各种测试工具和功能，帮助您快速测试和验证系统功能。</p>
          </div>

          <div class="test-categories">
            <!-- 认证相关测试 -->
            <div class="category-section">
              <h3>
                <el-icon><User /></el-icon>
                认证功能测试
              </h3>
              <div class="test-grid">
                <el-card class="test-item" @click="goTo('/login')" shadow="hover">
                  <div class="test-icon">🔑</div>
                  <h4>用户登录</h4>
                  <p>测试用户登录功能，支持密码显示</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/register')" shadow="hover">
                  <div class="test-icon">📝</div>
                  <h4>用户注册</h4>
                  <p>测试用户注册功能，完整的表单验证</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/register')" shadow="hover">
                  <div class="test-icon">⚡</div>
                  <h4>快速注册测试</h4>
                  <p>简化的注册测试页面，快速创建测试用户</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/password-reset')" shadow="hover">
                  <div class="test-icon">🔄</div>
                  <h4>密码重置工具</h4>
                  <p>重置数据库中用户的密码</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/register-debug')" shadow="hover">
                  <div class="test-icon">🔧</div>
                  <h4>注册API调试</h4>
                  <p>调试注册接口和验证码功能</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/admin-login')" shadow="hover">
                  <div class="test-icon">👑</div>
                  <h4>管理员登录</h4>
                  <p>测试管理员登录功能</p>
                </el-card>
              </div>
            </div>

            <!-- API和系统测试 -->
            <div class="category-section">
              <h3>
                <el-icon><Connection /></el-icon>
                API和系统测试
              </h3>
              <div class="test-grid">
                <el-card class="test-item" @click="goTo('/test/api')" shadow="hover">
                  <div class="test-icon">🔗</div>
                  <h4>API连接测试</h4>
                  <p>测试前后端API连接和各种接口</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/api-debug')" shadow="hover">
                  <div class="test-icon">🛠️</div>
                  <h4>API实时调试</h4>
                  <p>实时调试API请求和响应</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/backend-test')" shadow="hover">
                  <div class="test-icon">🔌</div>
                  <h4>后端连接测试</h4>
                  <p>诊断前后端连接问题</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/message')" shadow="hover">
                  <div class="test-icon">💬</div>
                  <h4>消息系统测试</h4>
                  <p>测试聊天、消息通知等功能</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/messages')" shadow="hover">
                  <div class="test-icon">📨</div>
                  <h4>消息中心</h4>
                  <p>查看和管理所有消息</p>
                </el-card>
              </div>
            </div>

            <!-- 业务功能测试 -->
            <div class="category-section">
              <h3>
                <el-icon><House /></el-icon>
                业务功能测试
              </h3>
              <div class="test-grid">
                <el-card class="test-item" @click="goTo('/')" shadow="hover">
                  <div class="test-icon">🏠</div>
                  <h4>主页</h4>
                  <p>查看系统主页和导航</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/search')" shadow="hover">
                  <div class="test-icon">🔍</div>
                  <h4>房源搜索</h4>
                  <p>测试房源搜索和筛选功能</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/publish')" shadow="hover">
                  <div class="test-icon">📋</div>
                  <h4>发布房源</h4>
                  <p>测试房源发布功能</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/admin/dashboard')" shadow="hover">
                  <div class="test-icon">📊</div>
                  <h4>管理员后台</h4>
                  <p>管理员功能和数据统计</p>
                </el-card>

                <el-card class="test-item" @click="goTo('/test/contract')" shadow="hover">
                  <div class="test-icon">📋</div>
                  <h4>签约功能测试</h4>
                  <p>测试租客发起签约申请功能</p>
                </el-card>
              </div>
            </div>
          </div>

          <div class="quick-actions">
            <h3>快速操作</h3>
            <div class="action-buttons">
              <el-button type="primary" @click="createTestUser">
                创建测试用户
              </el-button>
              <el-button type="success" @click="loginAsTestUser">
                登录测试用户
              </el-button>
              <el-button type="warning" @click="resetTestData">
                重置测试数据
              </el-button>
              <el-button type="info" @click="showSystemInfo">
                系统信息
              </el-button>
            </div>
          </div>

          <div class="system-status">
            <h3>系统状态</h3>
            <div class="status-grid">
              <div class="status-item">
                <div class="status-label">前端服务</div>
                <el-tag type="success">运行中</el-tag>
              </div>
              <div class="status-item">
                <div class="status-label">后端API</div>
                <el-tag :type="backendStatus.type">{{ backendStatus.text }}</el-tag>
              </div>
              <div class="status-item">
                <div class="status-label">数据库</div>
                <el-tag :type="databaseStatus.type">{{ databaseStatus.text }}</el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Connection, House } from '@element-plus/icons-vue'

// 路由
const router = useRouter()

// 系统状态
const backendStatus = reactive({
  type: 'info',
  text: '检测中...'
})

const databaseStatus = reactive({
  type: 'info',
  text: '检测中...'
})

// 方法
const goTo = (path) => {
  router.push(path)
}

const createTestUser = () => {
  router.push('/test/register')
}

const loginAsTestUser = () => {
  router.push('/login')
}

const resetTestData = async () => {
  try {
    await ElMessageBox.confirm(
      '这将清除所有测试数据，确定要继续吗？',
      '重置测试数据',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    ElMessage.success('测试数据重置成功')
  } catch (error) {
    // 用户取消
  }
}

const showSystemInfo = () => {
  ElMessageBox.alert(
    `
    前端框架: Vue 3 + Element Plus
    构建工具: Vite
    后端框架: Spring Boot
    数据库: MySQL
    缓存: Redis
    开发环境: ${import.meta.env.MODE}
    `,
    '系统信息',
    {
      confirmButtonText: '确定'
    }
  )
}

const checkSystemStatus = async () => {
  // 检查后端状态
  try {
    // 这里可以调用一个健康检查接口
    backendStatus.type = 'success'
    backendStatus.text = '正常'
  } catch (error) {
    backendStatus.type = 'danger'
    backendStatus.text = '离线'
  }

  // 检查数据库状态
  try {
    // 这里可以调用数据库健康检查接口
    databaseStatus.type = 'success'
    databaseStatus.text = '正常'
  } catch (error) {
    databaseStatus.type = 'danger'
    databaseStatus.text = '连接失败'
  }
}

// 生命周期
onMounted(() => {
  checkSystemStatus()
})
</script>

<style scoped>
.test-index {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.test-container {
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #2c3e50;
}

.test-content {
  padding: 20px 0;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.welcome-section p {
  color: #606266;
  font-size: 16px;
}

.category-section {
  margin-bottom: 40px;
}

.category-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #409eff;
  font-size: 18px;
  margin-bottom: 20px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.test-item {
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  padding: 20px;
}

.test-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.test-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.test-item h4 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 16px;
}

.test-item p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

.quick-actions {
  margin-bottom: 30px;
}

.quick-actions h3 {
  color: #409eff;
  margin-bottom: 15px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.system-status h3 {
  color: #409eff;
  margin-bottom: 15px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
}

.status-label {
  font-weight: 500;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .test-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
}
</style>
